<template>
	<view class="container">
		<view class="header">
			<view class="avatar">
				<image :src="card.avatar_cdn" />
			</view>
			<view class="name">
				{{ card.nickname }}
			</view>
			<view class="job">
				{{ card.job }}
			</view>
			<view class="company">
				{{ card.company }}
			</view>
			<view class="list">
				<view class="item">
					<image src="/static/images/like.png" />
					<text>900</text>
				</view>

				<view class="item">
					<image src="/static/images/visit.png" />
					<text>900</text>
				</view>

				<view class="item">
					<image src="/static/images/relay.png" />
					<text>转发</text>
				</view>
			</view>
		</view>

		<!-- #ifndef H5 -->
		<view class="menu">
			<u-button type="default" :plain="true" text="同步通讯录" :customStyle="syncBtn" @click="onAddContact"></u-button>
			<u-button type="default" :plain="true" text="分享名片" :customStyle="relayBtn" open-type="share"></u-button>
		</view>
		<!-- #endif -->

		<view class="info">
			<view class="title">信息</view>

			<view class="list">
				<view class="item">
					<view class="content">
						<view class="name">手机</view>
						<view class="value">{{ card.mobile }}</view>
					</view>
					<view class="icon">
						<image src="/static/images/tel.png" />
					</view>
				</view>

				<view class="item">
					<view class="content">
						<view class="name">邮箱</view>
						<view class="value">{{ card.email }}</view>
					</view>
					<view class="icon">
						<image src="/static/images/email.png" />
					</view>
				</view>

				<view class="item">
					<view class="content">
						<view class="name">地址</view>
						<view class="value">{{ card.address }}</view>
					</view>
					<view class="icon">
						<image src="/static/images/site.png" />
					</view>
				</view>
			</view>
		</view>

		<!-- 信息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			syncBtn: {
				color: 'red',
				background: 'transparent',
				width: '40%',
				border: '1px solid red',
				fontSize: '14px'
			},
			relayBtn: {
				color: '#fff',
				background: 'red',
				width: '40%',
			},
			card: {}
		}
	},
	methods: {
		async getCardData() {
			let result = await uni.$u.http.post('/index/card');
			if (result.code === 1) {
				this.card = result.data;
			}
		},
		onAddContact() {
			uni.addPhoneContact({
				photoFilePath: this.card.avatar_cdn,
				nickName: this.card.nickname,
				firstName: this.card.nickname,
				mobilePhoneNumber: this.card.mobile,
				weChatNumber: this.card.mobile,
				organization: this.card.company,
				title: this.card.job,
				workAddressStreet: this.card.address,
				email: this.card.email,
				success: () => {
					this.$refs.uToast.show({
						type: 'success',
						message: '添加成功'
					})
				},
				fail: (err) => {
					this.$refs.uToast.show({
						type: 'error',
						message: '取消修改'
					})
				}
			})
		}
	},
	onShow() {
		this.getCardData();
	},
	onShareAppMessage() {
		return {
			title: `${this.card.company}的名片`,
			path: '/pages/card/card',
			imageUrl: this.card.avatar_cdn
		}
	}
}
</script>

<style>
page {
	background-color: #eee;
}

.header {
	width: 95%;
	background-color: #fff;
	margin: 0 auto;
	border-radius: 10px;
	margin-top: 10px;
	padding: 20px 0;
	text-align: center;
	box-shadow: 0px 0px 10px 5px #dcdcdc;
}

.header .avatar {
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 50%;
	margin: 0 auto;
}

.header .avatar image {
	width: 100%;
	height: 100%;
}

.header .name {
	margin-top: 12px;
	font-weight: bold;
	font-size: 18px;
}

.header .job {
	font-size: 12px;
	color: #949bae;
	margin: 10px 0;
}

.header .company {
	font-size: 12px;
	color: #949bae;
}

.header .list {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.header .list .item {
	display: flex;
	flex-direction: column;
	width: 33%;
	justify-content: center;
}

.header .list .item image {
	width: 25px;
	height: 25px;
	margin: 0 auto;
}

.header .list .item text {
	font-size: 12px;
	color: #949bae;
	margin-top: 10px;
}

.menu {
	width: 95%;
	margin: 20px auto 0;
	display: flex;
	justify-content: space-around;
}

.info {
	width: 95%;
	margin: 20px auto 0;
	background-color: #fff;
	box-shadow: 0px 0px 10px 5px #dcdcdc;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 10px;
}

.info .list {
	margin-top: 10px;
}

.info .list .item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
	color: #949bae;
}


.info .list .item .content {
	display: flex;
	font-size: 12px;
}

.info .list .item .name {
	display: flex;
	align-items: center;
}

.info .list .item .name::after {
	content: '';
	width: 1px;
	height: 10px;
	background-color: #949bae;
	display: block;
	margin: 0 5px;
}

.info .list .item .icon {
	width: 15px;
	height: 15px;
}

.info .item .icon image {
	width: 100%;
	height: 100%;
}
</style>